<template>
    <span>
        <button class="button" :class="{disabled: !this.canClick}" @click="countDown">
            {{content}}
        </button>
    </span>
</template>

<script>
    export default {
        name: "CountDown",
        props: {
          second: {
              type: Number,
              default: 60
          }
        },
        data() {
            return {
                content: '发送验证码',
                canClick: true
            }
        },
        methods: {
            countDown() {
                if (!this.canClick) return;
                this.$emit('run');
                this.canClick = false;
                let total = this.second;
                this.content = total + 's后重新发送'; //这里解决60秒不见了的问题
                let clock = window.setInterval(() => {
                    total--;
                    this.content = total + 's后重新发送';
                    if (total < 0) {     //当倒计时小于0时清除定时器
                        window.clearInterval(clock);
                        this.content = '重新发送验证码';
                        total = 60;
                        this.canClick = true;
                    }
                }, 1000)
            }
        }

    }
</script>

<style scoped>
    .disabled {
        background-color: #ddd;
        border-color: #ddd;
        color:#57a3f3;
        cursor: not-allowed;
    }
</style>
